<template>
  <div>
    <div class="banner"></div>
    <div class="gsjs">
      <div class="content">
        <div class="title">公司介绍</div>
        <p class="text1">青岛泰捷网络科技有限公司成立于2014年5月</p>
        <p class="text2">
          泰捷云学在线培训系统主要面向行业培训机构、职业院校、企业园区，采用SaaS系统赋能各类机构开展线上培训业务，系统运用“云平台+内容+托管运营”的三位一体模式为企业及学员提供多元化在线培训及学习解决方案。丰富多样化的学习内容满足企业各类培训需求，完善的数据管理可实现学员各项安全培训结果和考核的管控，随时把控各部门各类人员安全培训进度，让培训学习更加务实、专业、高效，让培训管理更加省时、省力、省心。
        </p>
        <div class="isbody">
          <div class="isleft">
            <div v-for="item of gsjsList" class="item">
              <div class="num">{{ item.num }}</div>
              <span class="text">{{ item.title }}</span>
            </div>
          </div>
          <div class="isright">
            <img src="@/assets/about/gsjsRight.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="zycp">
      <div class="title">主要产品</div>
      <div class="iscontent">
        <div
          :class="'item ' + item"
          :style="indexs == index ? { background: '#0A54DC' } : ''"
          v-for="(item, index) of zycpList"
          :key="index"
          @click="addEl(index)"
        >
          <div
            :style="indexs == index ? { color: '#fff' } : { color: '#000' }"
            :class="'iconfont ' + item.icon"
          ></div>
          <p
            style="font-size: 17px"
            :class="index == indexs ? 'text1Now' : 'text1'"
          >
            {{ item.title }}
          </p>
          <p :class="index == indexs ? 'text2Now' : 'text2'">{{ item.text }}</p>
        </div>
      </div>
    </div>
    <div class="gnys">
      <p class="title">功能优势</p>
      <div class="content">
        <div class="item" v-for="item of gnysList">
          <img
            style="width: 95px; height: 111px; margin-bottom: 44px"
            :src="item.url"
            alt=""
          />
          <span class="text1">{{ item.title }}</span>
          <span class="text2">{{ item.text }}</span>
        </div>
      </div>
    </div>
    <div class="hzqd">
      <div class="title">合作渠道</div>
      <div class="content">
        <el-radio-group v-model="hzqdRadio">
          <el-radio-button label="0">机构</el-radio-button>
          <el-radio-button label="1">企业</el-radio-button>
          <el-radio-button label="2">城市合伙人</el-radio-button>
          <el-radio-button label="3">代理</el-radio-button>
        </el-radio-group>
        <div class="isbody">
          <div class="isleft">
            <p class="text1">{{ hzqdObj.title }}</p>
            <p style="height: 63px" class="text2">
              {{ hzqdObj.text }}
            </p>
            <p class="text3">合作请致电泰捷云学平台</p>
            <p class="text4">联系电话</p>
            <p class="text3">0532-58653556</p>
            <p class="text3">(服务时间：8:30-5:30 周一至周六）</p>
            <p class="text4">地址</p>
            <p class="text3">中国山东青岛中央商务区敦化路328号诺德广场A座T层</p>
          </div>
          <div class="isright">
            <img :src="hzqdObj.url" alt="" />
          </div>
        </div>
      </div>
    </div>

    <div class="lxwm">
      <div class="title">联系我们</div>

      <div class="content">
        <div class="isleft">
          <baidu-map id="allmap" @ready="mapReady" :scroll-wheel-zoom="true">
            <!-- 百度地图标注 -->
            <bm-marker
              :position="{ lng: 120.388222, lat: 36.097821 }"
              animation="BMAP_ANIMATION_BOUNCE"
              :icon="{
                url: require('@/assets/about/tubiao.png'),
                size: { width: 50, height: 56.3 },
              }"
            >
            </bm-marker>
          </baidu-map>
        </div>
        <div class="isright">
          <p style="font-size: 26px" class="text3">青岛</p>
          <p class="text4">联系电话</p>
          <p class="text3">0532-58653556</p>
          <p class="text3">(服务时间：8:30-5:30 周一至周六）</p>
          <p style="margin-top: 30px" class="text4">地址</p>
          <p class="text3">中国山东青岛中央商务区敦化路328号诺德广场A座T层</p>
        </div>
      </div>
      <div class="Contact">
        <div v-for="(item, index) of type" class="item">
          <img style="width: 40px; height: auto" :src="item.icon" alt="" />
          <div>
            <p>{{ item.title }}</p>
            <p>{{ item.content }}</p>
          </div>
        </div>
      </div>
      <div class="title">发起需求</div>
      <div class="isForm">
        <el-input
          v-model="form.nickname"
          placeholder="请输入您的姓名"
        ></el-input>
        <el-input v-model="form.mobile" placeholder="请输入您的电话"></el-input>
        <el-input
          v-model="form.company"
          placeholder="请输入机构名称"
        ></el-input>
        <el-select
          v-model="form.region"
          placeholder="请选择所在的地区"
          style="width: 580px"
        >
          <el-option
            v-for="(item, index) in columns"
            :label="item"
            :value="item"
            :key="index"
          ></el-option>
        </el-select>
        <el-input
          type="textarea"
          placeholder="请简单输入您的疑问或需求



"
          v-model="form.content"
        >
        </el-input>
      </div>
      <div class="isbutton">
        <el-button @click="commit" type="primary">申请试用</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "@/utils/request";
export default {
  data() {
    return {
      tel_test: /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
      columns: [],
      form: {
        nickname: "",
        mobile: "",
        company: "",
        region: "",
        content: "",
      },
      type: [
        {
          icon: require("@/assets/about/type1.png"),
          title: "电话",
          content: "0532-58653556",
        },
        {
          icon: require("@/assets/about/type2.png"),
          title: "传真",
          content: "0532-58653556",
        },
        {
          icon: require("@/assets/about/type3.png"),
          title: "邮箱",
          content: "taijie@shejiyuan.com",
        },
        {
          icon: require("@/assets/about/type4.png"),
          title: "地址",
          content: "中国山东青岛中央商务区",
        },
      ],
      point: "",
      hzqdObj: {},
      hzqdRadio: "0",
      hzqdList: [
        {
          title: "机构",
          text: "机构可与泰捷云学直接合作，开展安全应急或技能提升领域的培训业务。",
          url: require("@/assets/about/hzqd2.png"),
        },
        {
          title: "企业合作",
          text: "企业可与泰捷云学直接合作，开展企业各领域的培训工作。",
          url: require("@/assets/about/hzqd4.png"),
        },
        {
          title: "城市合伙人",
          text: "在某个或多个地级市，与其他企业共享泰捷云学的市场经销权，可开展安全应急或技能提升领域的培训业务。",
          url: require("@/assets/about/hzqd3.png"),
        },
        {
          title: "代理",
          text: "代理可在某个或多个地级市，拥有泰捷云学唯一的市场经销权，进行安全应急或技能提升领域的培训。",
          url: require("@/assets/about/hzqd1.png"),
        },
      ],
      indexs: 0,
      gsjsList: [
        {
          num: "100+",
          title: "培训工种",
        },
        {
          num: "425+",
          title: "合作机构",
        },
        {
          num: "5000+",
          title: "课件学时累计",
        },
        {
          num: "10万+",
          title: "各工种全题库",
        },
      ],
      zycpList: [
        {
          icon: "icon-a-bianzu22",
          title: "特种作业人员培训学习系统",
          text: "（应急管理局（原安监局））",
          content:
            "泰捷云学特种作业人员在线培训学习系统主要面向应急管理局的各类特种作业人员，用最新的信息化手段赋能培训机构开展线上培训业务 ，满足学员开展线上报名缴费、课件学习、专项练习、模拟考试、学时统计等学习练习活动。系统各作业项目下设电子版考核大纲、电子教材、培训课件、视频课程、考试题库， 其内容全面覆盖各考核大纲要求的知识点， 满足学员多种形式在线化学习的同时提高培训质量，进而提高经济效益，降低企业成本。",
        },
        {
          icon: "icon-a-bianzu7",
          title: "高危行业管理人员培训系统",
          text: "（应急管理局（原安监局））",
          content: "",
        },
        {
          icon: "icon-tezhongshebei",
          title: "特种设备作业人员培训系统",
          text: "（市场监管局(原质监局)）",
          content:
            "泰捷云学特种设备作业人员在线培训学习系统主要面向市场监管局的各类特种设备作业人员，是各作业人员考前培训、技能提升的在线培训学习系统。系统严格按照《特种设备作业人员作业种类与项目目录》95号文，对特种设备作业人员资格认定分类与项目中11种特种设备作业人员开展线上报名缴费、课件学习、专项练习、模拟考试、学时统计等学习练习活动。系统各作业项目下设电子版考核大纲、电子教材、培训课件、视频课程、考试题库，其内容全面覆盖各考核大纲要求的知识点，满足学员多种形式在线化学习。",
        },

        {
          icon: "icon-baoguo",
          title: "一般工贸行业管理人员培训系统",
          text: "（应急管理局（原安监局））",
          content:
            "泰捷云学一般工贸行业管理人员在线培训学习系统是主要面向一般行业企业安全管理人员和主要负责人， 支持培训机构开展基于互联网的在线培训及信息化管理，实现学员不脱岗的前提下完成在线报名缴费、在线培训学习、学习内容与学时认证、在线考试、证书打印及下载等全流程线上操作， 支持培训机构管理员账户对本机构学员进行批量创建账号、批量下载学习证书打印、查看并导出学习记录等操作， 极大提升培训效率，提高培训质量。",
        },
        {
          icon: "icon-yiyuanjiuzhen",
          title: "职业卫生安全管理培训系统",
          text: "（卫健委）",
          content:
            "泰捷云学职业卫生安全管理在线培训学习系统是面向职业卫生从业人员、职业健康管理人员、单位或企业重点接害岗位人员等，支持各机构开展线上培训学习，培训方式由传统集中面授培训转为学员通过PC、手机等多种终端设备接入平台，在任意时间、任意地点自主学习，培训管理由传统的纸质记录和统计转为电子化、信息化、数据化分析，进而极大提高日常培训学习和管理效率。",
        },
        {
          icon: "icon-yuzhijineng",
          title: "职业技能等级认定培训系统",
          text: "（人社局）",
          content:
            "泰捷云学职业技能等级认定在线培训系统，主要满足人社局各工种电工、焊工、钳工、车工、汽车修理工、茶艺师、保育员、中式烹调师、面点师、西式面点师等培训学习练习。泰捷云学职业技能等级认定在线考试系统，课满足人社局各工种等级认定的工作的线上理论考试，系统支持上千人同时在线考试，实现千人千卷、系统阅卷、成绩实时查询等功能。",
        },
        {
          icon: "icon-yuanqu",
          title: "建筑类从业人员培训系统",
          text: "（建设厅）",
          content:
            "泰捷云学建筑类从业人员在线培训学习系统主要面向建筑施工特种作业人员、建筑施工企业安全管理人员（三类人员）及建筑施工现场专业人员（八大员），利用先进的互联网技术，结合最新培训考试大纲要求，为各机构提供丰富的精品课程、先进的技术平台和专业的指导服务，平台旨在用优质的资源和先进的在线教育理念，结合移动互联技术，助力建筑施工从业人员教育培训高质量发展。",
        },
        {
          icon: "icon-tz-jiaotongyunshu",
          title: "交通运输行业在线培训系统",
          text: "（运管局）",
          content:
            "泰捷云学交通运输行业在线培训学习系统是面向交通运输从业人员的线上培训学习系统，支持培训机构开展基于互联网的在线培训及信息化管理， 实现学员不脱岗的前提下完成在线报名缴费、在线培训学习、学习内容与学时认证、在线考试、证书打印及下载等全流程线上操作，突破传统线下培训模式的各种约束和限制， 在符合监管要求的前提下， 有效利用互联网将日常安全生产培训工作落到实处。",
        },

        {
          icon: "icon-a-bianzu11",
          title: "企业安全生产培训学习系统",
          text: "（生产经营类企业/园区）",
          content:
            "泰捷云学企业安全生产培训学习系统是青岛泰捷网络科技有限公司自主研发的一款针对企业日常安全生产教育培训的线上学习系统。系统采用“云平台+内容+托管运营”的三位一体模式为企业提供多元化的在线培训及学习解决方案。丰富多样化的学习内容满足企业各类培训需求，内置完整的课件库、教学视频、复习考试题库等；完善的数据管理可实现员工各项安全培训结果和考核的管控，系统自动统计培训和考试数据，形成培训电子台账，支持各类报表、台账导出，随时把控各部门各类人员安全培训进度，大幅度降低企业培训成本的同时，帮助企业员工建立动态化的终身学习模式，从而让安全培训更加务实、专业、高效，让安全管理更加省时、省力、省心。",
        },

        {
          icon: "icon-a-bianzu63",
          title: "企业三级安全教育专项培训系统",
          text: "（生产经营类企业/园区）",
          content:
            "泰捷云学企业三级安全教育专项培训系统，为企业新入职、在职员工提供厂级（公司级）、车间级（部门级）、岗位（班组级）安全教育培训，通过可定制化科目建设，分配不同课程题库，对不同等级的安全培训提供有针对性的内容安排，满足不同岗位员工的安全能力要求，提高企业在安全管理方面的能力，使企业建立起有效的安全文化，确保企业及员工长期处于安全状态。",
        },
        {
          icon: "icon-a-bianzu64",
          title: "企业安全生产双体系建设管理系统",
          text: "（生产经营类企业/园区）",
          content:
            "泰捷云学企业安全生产双体系建设管理系统助推企业加快安全生产风险分级管控与隐患排查治理双重预防机制建设，创建各部门分级管理负责人，将生产各流程风险点通过系统进行上报，下级负责人可及时收到并进行排查解决，建立各岗位及车间隐惠排查记录信息表，负责人可通过系统统计全面分析公司设施设备及生产活动存在的风险，通过安全生产风险评估、分级管控使安全隐患始终处于受控状态，杜绝和减少企业安全生产事故的发生。",
        },
        {
          icon: "icon-a-bianzu62",
          title: "企业工伤预防能力提升专项培训系统",
          text: "（生产经营类企业/园区）",
          content:
            "泰捷云学企业工伤预防能力提升专项培训系统帮助企业推进危险化学品重点企业安全生产分管负责人、专职安全管理人员和班组长的工伤预防能力提升培训工作，通过线上设置专项知识点课程让学员学习，学习完成后，切实提升工伤预防意识和能力，将从业人员培养成高素质的产业工人，推动落实企业工伤预防主体责任。",
        },
      ],
      gnysList: [
        {
          title: "系统独立定制开发",
          text: "培训线上化",
          url: require("@/assets/about/gnys1.png"),
        },
        {
          title: "题库课件全面覆盖",
          text: "学习体系化",
          url: require("@/assets/about/gnys2.png"),
        },
        {
          title: "学时数据统计分析",
          text: "管理智能化",
          url: require("@/assets/about/gnys3.png"),
        },
        {
          title: "专属品牌全面赋能",
          text: "宣传品牌化",
          url: require("@/assets/about/gnys4.png"),
        },
      ],
    };
  },
  watch: {
    hzqdRadio(val) {
      this.hzqdObj = this.hzqdList[val];
    },
  },
  methods: {
    commit() {
      if (!this.form.nickname) {
        return this.$message.error("请填写您的姓名");
      }
      if (!this.tel_test.test(this.form.mobile)) {
        return this.$message.error("联系电话格式有误");
      }
      if (!this.form.region) {
        return this.$message.error("请选择您的所在地区");
      }
      // if(!this.content){
      //    return this.$toast.fail('请填写您的需求,方便我们安排专业人员与您联系')
      // }
      axios({
        method: "post",
        url: "https://b.taijieyun.com/index/feedback/create",
        data: this.form,
      })
        .then((res) => {
          if (res.data.code == 200) {
            this.$message.success("提交成功");
            this.form = {
              nickname: "",
              mobile: "",
              company: "",
              region: "",
              content: "",
            };
          } else {
            this.$message.error("提交失败");
          }
        })
        .catch((err) => {
          this.$message.error("服务器错误");
        });
    },
    mapReady({ BMap, map }) {
      // 选择一个经纬度作为中心点
      this.point = new BMap.Point(120.387817, 36.098201);
      // 地图级别
      map.centerAndZoom(this.point, 19);
    },
    addEl(item) {
      this.indexs = item;

      let all = document.getElementsByClassName("isContentText");
      for (const i in all) {
        if (Number(i) || Number(i) == 0) {
          all[i].remove();
        }
      }
      let el = document.createElement("div");
      el.classList.add("isContentText");
      el.innerText = this.zycpList[item].content;
      let dom = document.getElementsByClassName("iscontent")[0];
      if (item <= 3) {
        dom.insertBefore(el, dom.children[3].nextElementSibling);
      } else if (3 < item && item <= 7) {
        dom.insertBefore(el, dom.children[7].nextElementSibling);
      } else if (7 < item) {
        dom.insertBefore(
          el,
          dom.children[dom.children.length - 1].nextElementSibling
        );
      }
      this.$forceUpdate();
    },
  },
  mounted() {
    this.$nextTick(() => {
      //百度地图圆角
      document.getElementById("allmap").children[0].style.borderRadius =
        12 + "px";

      this.addEl(0);
      this.hzqdObj = this.hzqdList[0];
    });
    axios({
      method: "get",
      url: "https://b.taijieyun.com/admin/region/regionList",
      params: {
        region_id: "0",
      },
    }).then((res) => {
      let data = res.data;
      if (data.code == 200) {
        data.data.list.map((item) => {
          this.columns.push(item.region_name);
        });
      }
    });
  },
};
</script>

<style lang="scss" scoped>
p {
  margin: 0;
}
.lxwm {
  // height: 1317px;
  width: 100%;
  // background: #999;
  background: #f7faff;
  overflow: hidden;
  .isForm {
    margin: auto;
    height: 230px;
    width: 1320px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 36px;

    /deep/ .el-input,
    .el-select {
      width: 312px !important;
      .el-input__inner {
        color: #000;
        &::placeholder {
          color: #001;
        }
        border: none;
        width: 312px;
        height: 54px;
      }
    }
    /deep/ .el-textarea {
      .el-textarea__inner {
        color: #000;
        padding-top: 10px;
        border: none;
        height: 142px;
        &::placeholder {
          color: #001;
        }
      }
    }
    display: flex;
  }
  .isbutton {
    display: flex;
    justify-content: center;
    /deep/ .el-button--primary {
      width: 144px;
      height: 46px;
      background: #0a54dc;
      border-radius: 8px;
      // border: 1px solid #ffffff;
      border: none;
      margin-bottom: 80px;
    }
  }
  .title {
    text-align: center;
    margin: 80px 50px;
    font-size: 36px;
    font-weight: 500;
    color: #333333;
    line-height: 50px;
  }
  .content {
    margin: auto;
    width: 1280px;
    height: 435px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .isleft {
      width: 676px;
      height: 435px;
      #allmap {
        border-radius: 12px;

        height: 100%;
        width: 100%;
        margin: 0 auto;
        /deep/ .BMap_Marker {
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .isright {
      border-radius: 12px;
      box-sizing: border-box;
      width: 540px;
      height: 353px;
      background: #fff;
      padding: 41px 50px;

      .text3 {
        font-size: 18px;
        // font-family: AlibabaPuHuiTiR;
        color: #333333;
      }
      .text4 {
        font-size: 14px;
        margin-top: 42px;
        margin-bottom: 12px;
        // font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
      }
    }
  }
  .Contact {
    width: 1320px;
    height: 100px;
    background: #fff;
    margin: 40px auto 80px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    border-radius: 12px;
    .item {
      width: 228px;
      height: 48px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      img {
        margin-right: 8px;
      }
    }
  }
}
.hzqd {
  overflow: hidden;
  height: 810px;
  width: 100%;
  background: #fff;
  min-width: 1200px;
  .title {
    text-align: center;
    font-size: 36px;
    font-weight: 500;
    color: #333333;
    line-height: 50px;
    margin-top: 80px;
    margin-bottom: 50px;
  }
  .content {
    width: 1200px;
    height: 550px;
    box-sizing: border-box;
    margin: auto;
    border-radius: 12px;
    // background: #0651c1;
    /deep/ .el-radio-group {
      width: 1200px;
      box-shadow: 0px 4px 18px 0px rgba(21, 92, 221, 0.1);
      .el-radio-button {
        .el-radio-button__inner {
          border: none;
          height: 61px;
          line-height: 36px;
          width: 300px;
        }
      }
      .is-active {
        .el-radio-button__inner {
          box-shadow: none;
          background: #0a54dc;
        }
      }
    }
    .isbody {
      margin-top: 32px;
      padding: 36px 48px;
      box-sizing: border-box;
      box-shadow: 0px 2px 18px 0px rgba(234, 238, 253, 0.7);
      height: 457px;
      display: flex;
      justify-content: space-between;
      .isleft {
        width: 327px;
        height: 385px;
        .text1 {
          font-size: 30px;
          // font-family: AlibabaPuHuiTiR;
          color: #333333;
          margin-bottom: 18px;
        }
        .text2 {
          font-size: 16px;
          color: #3e4c6c;
          margin-bottom: 56px;
        }
        .text3 {
          font-size: 16px;
          // font-family: AlibabaPuHuiTiR;
          color: #333333;
        }
        .text4 {
          font-size: 14px;
          margin-top: 18px;
          margin-bottom: 10px;
          // font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
        }
      }
      .isright {
        width: 713px;
        height: 385px;
      }
    }
  }
}
.gnys {
  height: 598px;
  width: 100%;
  min-width: 1320px;
  background: #0a54dc;
  overflow: hidden;
  .title {
    font-size: 36px;
    font-weight: 500;
    color: #ffffff;
    line-height: 50px;
    margin-top: 100px;
    margin-bottom: 50px;
    height: 50px;
    text-align: center;
  }
  .content {
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-content: flex-start;
    width: 1320px;
    height: 298px;

    .item {
      display: flex;
      justify-content: center;
      align-content: center;
      flex-wrap: wrap;
      background: #fff;
      width: 280px;
      height: 298px;

      border-radius: 12px;
      span {
        height: auto;
        width: 100%;
        text-align: center;
      }
      .text1 {
        display: inline-block;
        margin-bottom: 8px;
        font-size: 18px;
        font-weight: 400;
        color: #333333;
      }
      .text2 {
        font-size: 14px;
        font-weight: 400;
        color: #999999;
      }
    }
  }
}

.banner {
  width: 100%;
  height: 530px;
  background: url("@/assets/about/banner.png");
  background-position: 50%;
  min-width: 1320px;
}
.gsjs {
  height: 810px;
  width: 100%;
  overflow: hidden;
  //   background: black;
  background: #f7faff;
  min-width: 1320px;
  .content {
    box-sizing: border-box;
    overflow: hidden;

    width: 1320px;
    height: 650px;
    margin: auto;
    margin-top: 80px;
    background: #fff;
    padding: 50px;

    .title {
      margin-bottom: 50px;
      font-size: 36px;
      font-weight: 500;
      color: #333333;
      text-align: center;
    }
    .text1 {
      font-size: 20px;
      font-weight: 400;
      //   color: #31314e;
      margin-bottom: 18px;
    }
    .text2 {
      font-size: 18px;
      font-weight: 400;
      color: #6f738f;
      //   letter-spacing: 1px;
      margin-bottom: 30px;
      line-height: 35px;
    }
    .isbody {
      width: 100%;
      height: 264px;
      //   background: pink;
      display: flex;
      justify-content: space-between;
      .isleft {
        width: 803px;
        height: 264px;
        display: flex;
        justify-content: space-between;
        align-content: space-between;
        flex-wrap: wrap;
        .item {
          padding: 28px 32px;
          width: 386px;
          height: 122px;
          box-shadow: 0px 4px 18px 0px rgba(234, 238, 253, 0.7);
          box-sizing: border-box;
          border-radius: 4px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .num {
            width: 150px;
            font-size: 56px;
            font-family: jiangsir;
            font-weight: bold;
            color: #0651c1;
            margin-right: 16px;
          }
          .text {
            font-size: 20px;
            font-weight: 600;
            color: #333333;
          }
        }
      }
      .isright {
        width: 386px;
        height: 264px;
      }
    }
  }
}
.zycp {
  height: 991px;
  width: 100%;
  overflow: hidden;
  //   background: #0651c1;
  min-width: 1320px;
  .title {
    margin: 80px 0 50px;
    font-size: 36px;
    // font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 50px;
    letter-spacing: 3px;
    text-align: center;
  }
  .iscontent {
    width: 1320px;
    height: 731px;
    margin: auto;
    background: #fff;
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    .item {
      cursor: pointer;
      padding: 30px 0 30px 50px;
      box-sizing: border-box;
      width: 330px;
      height: 185px;
      //   background: #6f738f;
      border: 1px solid #e9edf8;
      .iconfont {
        color: #fff;
        font-size: 50px;
      }
      .text1 {
        font-size: 18px;
        font-weight: 400;
        color: #000;
        margin-top: 16px;
        margin-bottom: 12px;
      }
      .text1Now {
        font-size: 18px;
        font-weight: 400;
        color: #ffffff;
        margin-top: 16px;
        margin-bottom: 12px;
      }
      .text2 {
        font-size: 14px;
        font-weight: 400;
        color: #999999;
      }
      .text2Now {
        font-size: 14px;
        font-weight: 400;
        color: #eeeeee;
      }
    }
    /deep/ .isContentText {
      text-align: justify;
      width: 1320px;
      height: 176px;
      box-sizing: border-box;
      padding: 32px 48px;
      background: #f9fcff;

      font-size: 16px;
      font-weight: 400;
      color: #3e4c6c;
      line-height: 28px;
    }
  }
}
</style>